<template>
	<view class="main">
		<u-navbar
			title="用户中心"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
			:autoBack="true"
		></u-navbar>
		<view class="main_resume_head">
			<image :src="imgURL+info.avatar" ></image>
			<view style="margin-left: 10rpx;">
				<view class="resume_head_title" style="display: flex; justify-content: space-between;align-items: center;">
					<view>个人信息</view> 
					<view style="color: blue;font-size: 32rpx;" @click="goto('/resume/basic?edit=1')">修改</view>
				</view>
				<view class="resume_head_box">
					<view class="main_resume_box_job">
						<view class="resume_head_time">
							工作经验：{{info.work_y || ""}} - {{info.age1 || 25}}岁 - {{info.education || ""}}
						</view>
						<view class="resume_head_time" v-if="info.remark">求职意向：{{info.remark || ""}}</view>
						<view class="resume_head_time" v-if="info.schoolname">毕业学校：{{info.schoolname || ""}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main_resume_content">
			<view class="main_resume_content_right">
				<scroll-view :style="'height: '+height+'px'" scroll-y="true">
				
				<view>
					<view class="main_resume_title" style="display: flex; justify-content: space-between;align-items: center;">
						<view>视频展示</view> 
						<view style="color: blue;font-size: 32rpx;" @click="goto('/resume/video')">{{info.video_url ? "修改" : "添加"}}</view>
					</view>
					<view class="main_resume_box">
						<view class="main_resume_box_job">
							<view v-if="info.video_url">
								<video :src="imgURL+info.video_url" style="max-width: 100%;max-height: 100%;"></video>
							<!-- 	<video-player :title="'个人视频简历'" :videoSrc="imgURL+info.video_url" :videoType="'mp4'">
								 </video-player> -->
							</view>
							<view class="main_resume_box_job_intro">
								{{info.intro || ""}}
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top:60rpx">
					<view class="main_resume_title" style="display: flex; justify-content: space-between;align-items: center;">
						<view>作品集</view> 
						<view style="color: blue;font-size: 32rpx;" @click="goto('/resume/image')">{{imgs.length > 0 ? "修改" : "添加"}}</view>
					</view>
					<view class="main_resume_box">
						<view class="main_resume_box_job" style="display: flex;">
							<view v-if="imgs">
								<block v-for="(item,index) in imgs">
									<image @click="shoImg(index)" style="width: 200rpx;height:200rpx;margin-right: 20rpx;" :src="imgURL + item"></image>
								</block>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top:60rpx">
					<view class="main_resume_title" style="display: flex; justify-content: space-between;align-items: center;">
						<view>工作经验</view> 
						<view style="color: blue;font-size: 32rpx;" @click="openmodel(null)">添加</view>
					</view>
					<block v-for="(item,index) in info.explist">
						<view class="main_resume_box">
							<view class="main_resume_box_job_left">
								<image style="width:50rpx;height:50rpx" src="../../static/img/jobbao.png"></u--image> 
							</view>
							<view class="main_resume_box_job">
								<view class="main_resume_box_job_company">
									<view>{{item.companyName || ""}}</view>
								</view>
								<view class="main_resume_box_job_time">工作时间：{{item.startDate || ""}}-{{item.endDate || ""}}</view>
								<view class="main_resume_box_job_post">岗位：{{item.positionName || ""}}</view>
								<view class="main_resume_box_job_intro">
									{{item.workContent || ""}}
								</view>
								<view style="display: flex;width: 150rpx;justify-content: space-between;">
									<view style="color: blue;font-size: 32rpx;" @click="openmodel(item.exp_id)">修改</view>
									<view style="color: blue;font-size: 32rpx;" @click="delExp(item.exp_id)">删除</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="main_resume_foot">
			<view class="foot_left">
				<text>简历剩余投递次数</text>
				<text>3次/周</text>
			</view>
			<view class="foot_right">取消发布</view>
		</view> -->
		<u-modal
			:title="title"
			:show="showModal"
			showCancelButton
			asyncClose
			@confirm="confirm"
			@cancel="() => showModal = false"
		>
			<u--form
				labelPosition="left"
				:model="form"
				ref="form"
			>
				<u-form-item
					label="公司名称"
					prop="companyName"
					borderBottom
					labelWidth="80"
				>
					<u--input
						v-model="form.companyName"
						border="none"
						placeholder="公司名称"
					></u--input>
				</u-form-item>
				<u-form-item
					label="所属部门"
					prop="department"
					borderBottom
					labelWidth="80"
				>
					<u--input
						v-model="form.department"
						border="none"
						placeholder="所属部门"
					></u--input>
				</u-form-item>
				<u-form-item
					label="职位名称"
					prop="positionName"
					borderBottom
					labelWidth="80"
				>
					<u--input
						v-model="form.positionName"
						border="none"
						placeholder="职位名称"
					></u--input>
				</u-form-item>
				<u-form-item
					label="入职时间"
					prop="startDate"
					borderBottom
					labelWidth="80"
				>
					<u--input
						v-model="form.startDate"
						border="none"
						placeholder="入职时间"
					></u--input>
				</u-form-item>
				<u-form-item
					label="离职时间"
					prop="endDate"
					borderBottom
					labelWidth="80"
				>
					<u--input
						v-model="form.endDate"
						border="none"
						placeholder="离职时间"
					></u--input>
				</u-form-item>
				<u-form-item
					label="负责项目"
					prop="workContent"
					labelWidth="80"
				>
				</u-form-item>
				<u-form-item>
					<u--textarea
						placeholder="不低于3个字"
						v-model="form.workContent"
						:maxlength='800'
						count
					></u--textarea>
				</u-form-item>
			</u--form>
		</u-modal>
		<Tabbar :count="2"></Tabbar>
	</view>
</template>

<script>
	import util from "@/utils/utils.js"
	import Tabbar from "@/components/Tabbar"
	import videoPlayer from '@/components/video'
	import { getMyResume,saveExperience,getexperience,delExperience } from '@/api/resume.js'
	import { imgURL } from '@/utils/config'
	export default {
		components: {
			videoPlayer,
			Tabbar
		},
		data() {
			return {
				imgURL:imgURL,
				info: '',
				height:0,
				showModal:false,
				imgs:[],
				title:'添加工作经验',
				form:{
					companyName:'',//公司名称
					department:'',//所属部门
					positionName:'',//职位名称
					startDate:'',//入职时间
					endDate:'',//离职职时间
					workContent:'',//项目内容
				}
			}
		},
		onLoad() {
			let that = this
			 uni.getSystemInfo({
					success: (res)=> {
						that.height = res.windowHeight- uni.upx2px(100)-260 //获取系统信息，可使用窗口的高度
					}
			});
				
			this.getResume()
		},
		methods: {
			//获取信息
			getResume() {
				getMyResume({}).then(res=>{
					if(res.code == 200){
						this.info = res.data
						if(res.data.imgs){
							this.imgs = JSON.parse(res.data.imgs)
						}
					}
				})
			},
			
			//工作经历弹窗
			openmodel(exp_id) {
				this.showModal = true
				this.title = "添加工作经验"
				if(exp_id){
					this.title = "修改工作经验"
					getexperience({exp_id:exp_id}).then((res)=>{
						if(res.code == 200){
							this.form = res.data
						}
						else{
							return uni.showToast({
								title:res.msg,
								duration: 2000,
								icon:'none'
							});
						}
					})
				}
			},
			
			//提交
			confirm(){
				let that= this
				if (this.form.companyName == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写公司名称'
					});
				}
				if (this.form.department == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写所属部门'
					});
				}
				if (this.form.positionName == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写职位名称'
					});
				}
				if (this.form.startDate == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写入职时间'
					});
				}
				if (this.form.endDate == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写离职时间'
					});
				}
				if (this.form.workContent == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写负责的项目内容'
					});
				}
				saveExperience(this.form).then((res)=>{
					this.showModal = false
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								that.getResume()
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			// 新增图片
			async upload() {
				let _this = this;
				util.uploadFile("/user/Upload").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								_this.form.avatar = res.data
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			// 获取地理位置
			getAuthorizeMap(){
				const that = this
				uni.getLocation({
						type: 'wgs84',
						success (res) {
							that.tude.latitude = res.latitude
							that.tude.longitude = res.longitude
							that.showMapEl = true
						}
				});
			},
			
			delExp(id){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function (res) {
						if (res.confirm) {
							delExperience({id:id}).then((res)=>{
								uni.showToast({
									title:res.msg,
									duration: 2000,
									icon:'none',
									success() {
										that.getResume()
									}
								});
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
				
			//退出登录
			outlogin(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要退出账号吗？',
					success: function (res) {
						if (res.confirm) {
							util.clear()
							uni.redirectTo({
								url: '/pages/login/login'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			shoImg(index){
				var imgbox = this.imgs;
				for(let item of imgbox){
					item = this.imgURL+item
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
				//util.previewImage(index)
			},
			
			goto(tourl) {
				uni.navigateTo({
					url: tourl
				});
			}
		},
	}
	
</script>

<style lang="scss">
	.main{
			.outlogin{
				background: red;
				color: #fff;
				text-align: center;
				position: absolute;
				bottom: 120rpx;
				right: 20rpx;
				border-radius: 12rpx;
				padding: 8rpx 20rpx;
				z-index: 99;
				font-size: 24rpx;
			}

			.main_resume_head{
				width: 100%;
				background-color: #f5f5f5;
				display: flex;
				justify-content: center;
				padding: 40rpx 0;
				image{
					border-radius: 10rpx;
					width: 200rpx;
					height: 200rpx;
				}
				.resume_head_title{
					color: #000;
					font-size: 34rpx;
					font-weight: bold;
					height:60rpx;
					line-height: 60rpx;
				}
				
				.resume_head_box{
					display: flex;
					.resume_head_time{
						height:50rpx;
						line-height: 50rpx;
					}
				}
		}
		.main_resume_content{
			background-color: #fff;
			min-width: 750rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			padding: 80rpx 40rpx;
			position: absolute;
			display: flex;
			.main_resume_content_left{
				margin-right: 20rpx;
				margin-top: 40rpx;
			}
			.main_resume_content_right{	
				width: 650rpx;
				.main_resume_title{
					color: #000;
					font-size: 42rpx;
					font-weight: bold;
				}
				.main_resume_box{
					display: flex;
					.main_resume_box_job_left{
						margin-top: 44rpx;
						margin-right: 20rpx;
					}
					.main_resume_box_job{
						margin-top: 30rpx;
						.main_resume_box_job_company{
							color: #000;
							height: 70rpx;
							line-height: 70rpx;
						}
						.main_resume_box_job_time, .main_resume_box_job_intro, .main_resume_box_job_post{
							margin: 20rpx 0;
							color: #777777;
							word-break: break-all
						}
						.main_resume_box_job_time, .main_resume_box_job_post{
							color: #777777;
						}
						.main_resume_box_job_project{
							margin: 20rpx 0;
							background-color: #f9f9f9;
							border: 1px solid #cfcfcf;
							padding: 20rpx 30rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
		}
		
		.main_resume_foot{
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;
			position: fixed;
			bottom: 0;
			.foot_left{
				height:120rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				background-color: #795fff;
				width: 50%;
				padding-top: 20rpx;
				text{
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					display: block;
					width: 100%;
				}
			}
			.foot_right{
				text-align: center;
				height:140rpx;
				line-height: 140rpx;
				width: 50%;
				background-color: #000;
			}
		}
	}
</style>